<template>
  <div class="screen_sell_rank">
    <div class="rank_list_box">
      <div class="rank_list" :style="{top: slide_top+'px'}">
        <div class="rank" v-for="(item,index) in list" :key="index">
          <p><span :class="index<3?'front':''">{{index+1}}</span></p>
          <p><span>{{item.subsys}}</span></p>
          <p><span>{{item.module}}</span></p>
          <p><span>{{item.business}}</span></p>
          <p><span>{{item.name}}</span></p>
          <p><span :class="maxValue===item.value?'active':''">{{item.value}}</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "screen_sell_rank",
    data() {
      return {
        timer: null,
        slide_top: 0,
        list: [
          {
            "subsys": "北京总部",
            "module": "市场部",
            "business": "第一小分队",
            "name": "张强",
            "value": 6672389,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "北京总部",
            "module": "市场部",
            "business": "第一小分队",
            "name": "李涛",
            "value": 7673456.78,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "北京总部",
            "module": "市场二部",
            "business": "第二小分队",
            "name": "王楠",
            "value": 78345867,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售部",
            "business": "第三小分队",
            "name": "张伟",
            "value": 8967569,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售部",
            "business": "第三小分队",
            "name": "李静",
            "value": 5645657,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售部",
            "business": "第三小分队",
            "name": "完颜付",
            "value": 4999889,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售部",
            "business": "第三小分队",
            "name": "纳兰德",
            "value": 8878765,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售二部",
            "business": "突击小队",
            "name": "迪乌夫",
            "value": 7609878,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售二部",
            "business": "突击小队",
            "name": "南宫强",
            "value": 6786546,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售二部",
            "business": "突击小队",
            "name": "萨珊珊",
            "value": 3909786,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售二部",
            "business": "王牌小组",
            "value_background": "#93dcf3",
            "name": "占志林",
            "value": 10735687,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售二部",
            "business": "王牌小组",
            "name": "欧阳菲",
            "value": 8767544,
            "url": "http://www.baidu.com"
          },
          {
            "subsys": "上海分部",
            "module": "销售二部",
            "business": "王牌小组",
            "name": "令狐光",
            "value": 7867455,
            "url": "http://www.baidu.com"
          }
        ],
        maxValue: null,
      }
    },
    created() {
      this.$nextTick(() => {
        this.setMaxValue();
        this.setSlide()
      })
    },
    methods: {
      setMaxValue() {
        let tempValue = 0;
        this.list.forEach(item => {
          if(item.value > tempValue) {
            tempValue = item.value
          }
        });
        this.maxValue = tempValue
      },
      setSlide() {
        let num = this.list.length;
        let max_top = 0;
        let min_top = -35 * (num - 4);
        let timer = this.timer;
        timer = setInterval(() => {
          if(this.slide_top <= max_top && this.slide_top > min_top) {
            this.slide_top += -35 * 4
          }else{
            this.slide_top = 0;
          }
        }, 5000);
      }
    }
  }
</script>

<style scoped lang="scss">
  .screen_sell_rank {
    padding: 20px;
    height: 100%;
    .rank_list_box{
      height: 140px;
      overflow: hidden;
      position: relative;
      .rank_list{
        position: absolute;
        left: 0;
        width: 100%;
        transition: all 0.7s;
        .rank{
          display: flex;
          align-items: center;
          height: 35px;
          color: #fff;
          p{
            width: 16.6%;
            text-align: right;
            padding-right: 30px;
            span.active{
              color: #00c7a6;
            }
          }
          p:first-child{
            text-align: left;
            span{
              display: inline-block;
              width: 22px;
              height: 22px;
              text-align: center;
              line-height: 22px;
              background-image: linear-gradient(to top, #006B59,#0FAC92,#3FD4BB);
              border-radius: 50%;
              margin-left: 30px;
              font-size: 12px;
            }
            span.front{
              background: #f5a623;
            }
          }
        }
        .rank:nth-child(even) {
          background-image: linear-gradient(to left, rgba(202,255,246,0.1), rgba(202,255,246,0));
        }
      }
    }
  }
</style>
